<head>
    <link type="text/css" href="https://www.layuicdn.com/layui-v2.5.7/css/layui.css" rel="stylesheet">
    {#    <script type="text/javascript" src="/static/layui-v2.5.7/layui/layui.js"></script>#}
    <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/layui/2.5.7/layui.min.js"></script>
    <style>
        .layui-row {
            margin-bottom: 20px;
        }
        .layui-form-label {
            text-align: left;
            padding-left: 0;

        }
        .layui-input {
            width: 90%;
            float: left;
            border: 0;
        }
    </style>
</head>
<body style="text-align: center">
    <div  style="margin: 20px 20px 10px 20px">
        <div class="layui-row content">
            <div class="layui-form-item">
                <label class="layui-form-label">账号头像</label>
                <div class="layui-input-inline">
                    <img src="/static/basestatic/img/default_head.jpg" style="width: 64px; height: 64px">
                </div>
            </div>
        </div>

        <div class="layui-row content">
            <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                <div class="layui-row">
                    <div class="layui-col-xs5 layui-col-sm5 layui-col-md5">
                        <label class="layui-form-label">用户名</label>
                    </div>
                    <div class="layui-col-xs7 layui-col-sm7 layui-col-md7">
                        <input type="text" name="username" value="{{ user_info.username }}" readonly class="layui-input"/>
                    </div>
                </div>
            </div>
            <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                <div class="layui-row">
                    <div class="layui-col-xs5 layui-col-sm5 layui-col-md5">
                        <label class="layui-form-label">手机号
                            <a href="javascript:;" onclick="show_edit('phone')"><i class="layui-icon layui-icon-edit"
                                                                                   style="font-size: 20px; color: #A6A6A6;"></i></a>
                        </label>
                    </div>
                    <div class="layui-col-xs7 layui-col-sm7 layui-col-md7">
                        <input type="text" id="phone" value="{{ user_info.phone }}" autocomplete="off" readonly
                               maxlength="11" class="layui-input" onmouseout="forbid_edit('phone')" onchange="update('phone')"/>

                    </div>
                </div>
            </div>
        </div>
        <div class="layui-row content">
            <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                <div class="layui-row">
                    <div class="layui-col-xs5 layui-col-sm5 layui-col-md5">
                        <label class="layui-form-label">公司名称
                            <a href="javascript:;" onclick="show_edit('company')"><i class="layui-icon layui-icon-edit"
                                                                                     style="font-size: 20px; color: #A6A6A6;"></i></a>
                        </label>
                    </div>
                    <div class="layui-col-xs7 layui-col-sm7 layui-col-md7">
                        <input type="text" id="company" value="{{ user_info.company }}" readonly autocomplete="off"
                               class="layui-input" onmouseout="forbid_edit('company')" onchange="update('company')"/>
                    </div>
                </div>
            </div>

            <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                <div class="layui-row">
                    <div class="layui-col-xs5 layui-col-sm5 layui-col-md5">
                        <label class="layui-form-label">邮箱
                            <a href="javascript:;" onclick="show_edit('email')"><i class="layui-icon layui-icon-edit"
                                                                                   style="font-size: 20px; color: #A6A6A6;"></i></a>
                        </label>
                    </div>
                    <div class="layui-col-xs7 layui-col-sm7 layui-col-md7">
                        <input type="text" id="email" value="{{ user_info.email }}" autocomplete="off" readonly
                               class="layui-input"onmouseout="forbid_edit('email')" onchange="update('email')"/>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-row content">
            <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                <div class="layui-row">
                    <div class="layui-col-xs5 layui-col-sm5 layui-col-md5">
                        <label class="layui-form-label">账号类型</label>
                    </div>
                    <div class="layui-col-xs7 layui-col-sm7 layui-col-md7">
                        <input type="text" id="account_type" value="{{ user_info.account_type }}" readonly
                               class="layui-input"/>
                    </div>
                </div>
            </div>
            <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                <div class="layui-row">
                    <div class="layui-col-xs5 layui-col-sm5 layui-col-md5">
                        <label class="layui-form-label">注册时间</label>
                    </div>
                    <div class="layui-col-xs7 layui-col-sm7 layui-col-md7">
                        <input type="text" id="reg_time" value="{{ user_info.date_joined }}" readonly class="layui-input"/>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        layui.use(['layer', 'form'], function () {
            var layer = layui.layer;
            var form = layui.form;
        });
        {#显示编辑框#}
        function show_edit(id_name) {
            document.getElementById(id_name).style.border = "2px solid #737373";
            document.getElementById(id_name).readOnly = false;

        }
        {#禁止编辑#}
        function forbid_edit(id_name) {
            document.getElementById(id_name).style.border = "0";
            document.getElementById(id_name).readOnly = true;
        }
        {#更新数据#}
        function update(id_name) {
            document.getElementById(id_name).style.border = "0";
            document.getElementById(id_name).readOnly = true;
            let update_val = document.getElementById(id_name).value;

            var phoneRegExp = /^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/;
            var emailRegExp = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;

            if (phoneRegExp.test(update_val) || emailRegExp.test(update_val) || id_name=="company"){
                $.ajax({
                    url: "{% url 'profile:update_user_info' %}",
                    type: "POST",
                    dataType: "json",
                    data: {field: id_name, update_val: update_val},
                    //async: false,
                    success: function (result) {
                        if (result.code == '1') {
                            layer.msg('修改成功', {time: 800});
                        } else {
                            layer.msg('修改失败', {icon: 2, time: 1500});
                        }
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        alert('错误信息：' + XMLHttpRequest.responseText);
                    }
                });
            }else{
                layer.msg("格式错误!", {time: 800, icon: 2})
            }
        }
    </script>
</body>